import React from 'react';
import { Pagination, Popover, Spin } from 'antd';

import { VideosType, VideosValueType } from 'src/redux';

import './index.css';
import { Link } from 'react-router-dom';

interface Props {
  page: number;
  loading: boolean;
  videos: VideosType;
  fetchSourceDetails: (page: number) => void;
  setWatchVideo: (video: VideosValueType) => void;
}

export const ShowWeb: React.FC<Props> = ({ loading, page, videos, fetchSourceDetails, setWatchVideo }) => {
  const { attr: { pagecount } = {} } = videos;

  return (
    <div className="show-web-container">
      {loading || !videos.value.length ? (
        <div className="show-web-loading">
          <Spin size="large" />
        </div>
      ) : null}
      <div className="show-web-list">
        {videos.value.map((video) => (
          <span className="show-web-pic" key={video.id}>
            <Link to="/play" onClick={() => setWatchVideo(video)}>
              <Popover
                placement="bottom"
                title={video.name}
                content={video.describe && video.describe !== 'undefined' ? video.describe : '内详'}
              >
                <img src={video.pic} alt={video.name} />
              </Popover>
            </Link>
          </span>
        ))}
      </div>

      <div className="show-web-pagination">
        <Pagination
          showQuickJumper
          defaultCurrent={1}
          current={page}
          total={pagecount}
          onChange={fetchSourceDetails}
          showSizeChanger={false}
        />
      </div>
    </div>
  );
};

export const ShowMobile: React.FC = () => {
  return <div className="show-mobile-container"></div>;
};
